<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html {
            font-family: sans-serif;
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
        }

        .info-box {
            width: 450px;
            height: 400px;
            margin: 0 auto;
        }

        .info-box ul {
            padding-left: 0;
            margin-top: 0;
        }

        .info-box li {
            float: left;
            list-style-type: none;
            width: 150px;
        }

        .info-box li a {
            display: inline-block;
            text-decoration: none;
            width: 100%;
            line-height: 3;
            background-color: red;
            color: black;
            text-align: center;
        }

        .info-box li a:focus,
        .info-box li a:hover {
            background-color: #a60000;
            color: white;
        }

        .info-box li a.active {
            background-color: black;
            color: white;
        }

        .info-box .panels {
            height: 352px;
            position: relative;
            clear: both;
        }

        .info-box article {
            position: absolute;
            top: 0;
            left: 0;
            height: 352px;
            padding: 10px;
            color: white;
            background-color: #a60000;
        }

        .info-box .active-panel {
            z-index: 1;
        }
    </style>
</head>

<body>
    <section class="info-box">
        <!--tab菜单栏-->
        <ul>
            <li>
                <a href="#" class="active">Tab 1</a>
            </li>
            <li>
                <a href="#">Tab 2</a>
            </li>
            <li>
                <a href="#">Tab 3</a>
            </li>
        </ul>
        <div class="panels">
            <!-- 第一个 tab-->
            <article class="active-panel">
                <h2>The first tab</h2>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis
                    eu, pulvinar in augue. Vestibulum et orci scelerisque, vulputate tellus quis, lobortis dui. Vivamus varius
                    libero at ipsum mattis efficitur ut nec nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus
                    consequat aliquet, dui neque eleifend lorem, a auctor libero turpis at sem. Aliquam ut porttitor urna.
                    Nulla facilisi.</p>
            </article>
            <!-- 第二个 tab-->
            <article>
                <h2>The second tab</h2>

                <p>This tab hasn't got any Lorem Ipsum in it. But the content isn't very exciting all the same.</p>
            </article>
            <!-- 第三个 tab-->
            <article>
                <h2>The third tab</h2>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis
                    eu, pulvinar in augue. And now an ordered list: how exciting!</p>

                <ol>
                    <li>dui neque eleifend lorem, a auctor libero turpis at sem.</li>
                    <li>Aliquam ut porttitor urna.</li>
                    <li>Nulla facilisi</li>
                </ol>
            </article>
        </div>
    </section>



    <script>
        var tabs = document.querySelectorAll('.info-box li a');
        var panels = document.querySelectorAll('.info-box article');


        for (let i = 0; i < tabs.length; i++) {
            setTabHandler(tabs[i], i);
        }


        function setTabHandler(tab, tabPos) {
            tab.onclick = function () {
                for (i = 0; i < tabs.length; i++) {
                    if (tabs[i].getAttribute('class')) {
                        tabs[i].removeAttribute('class');
                    }
                }

                tab.setAttribute('class', 'active');

                for (i = 0; i < panels.length; i++) {
                    if (panels[i].getAttribute('class')) {
                        panels[i].removeAttribute('class');
                    }
                }

                panels[tabPos].setAttribute('class', 'active-panel');
            }
        }
    </script>
</body>

</html>